<script setup>
import { defineProps, watch, ref, onMounted, onUnmounted, nextTick } from 'vue'
import VideoPlayer from './VideoPlayer.vue'



const props = defineProps({
    options: { type: Object, default: () => ({}) },
    apiData: { type: Object, default: () => ({}) },
    busStore: { type: Object, default: () => ({}) },
    privateStore: { type: Object, default: () => ({}) },
    ownStore: { type: Object, default: () => ({}) }
})

const videoSource = ref('') // 目标值

const options = ref(props.options)
// 监听配置项变化
watch(() => props.options, (newValue, oldValue) => {
    options.value = newValue
    videoSource.value = newValue.videoSource
    console.log('options', options.value);
    
    if (options.value.apiList && options.value.apiList.length) {
        initData()
    }
}, { deep: true, immediate: true })

// 监听接口数据变化
watch(() => props.apiData, (newValue, oldValue) => {
    if (options.value.apiList && newValue?.url === options.value.apiList) {// 通过接口获取参数
        videoSource.value = newValue.result.data
    }
}, { deep: true })

// 监听公用数据变化
watch(() => props.busStore, (newValue, oldValue) => {
    if (options.value.commonKey && newValue[options.value.commonKey]) {// 通过公共值获取参数
        videoSource.value = newValue[options.value.commonKey]
    }
}, { deep: true })

// 监听私有数据变化
watch(() => props.privateStore, (newValue, oldValue) => {
    if (newValue.videoSource) {// 通过私有值获取参数
        videoSource.value = newValue.videoSource
    }
}, { deep: true })
// 只有一个在运行
let runApi = false
const { $runApi } = getMDInstance()
function initData() {
    let time = null
    if (runApi) {
        return
    }
    runApi = true
    if (options.value.apiList) {
        $runApi({
            url: options.value.apiList,
            ownStore: props.ownStore,// 必填
        });
    }
    time = setTimeout(() => {
        clearTimeout(time)
        runApi = false
        initData()
    }, Number(options.value.intervalTime) || 5000)
}
</script>

<template>
    <div class="video_free" :style="{
        width: options.width,
        height: options.height
    }">
        <VideoPlayer v-if="videoSource" :videoSource="videoSource" :isLive="options.isLive"
            :autoplay="options.autoplay" :showControls="options.showControls" :muted="options.muted"
            :poster="options.poster" :loop="options.loop" />
    </div>
</template>

<style scoped lang="scss"></style>